<template>
    <div>
        <Modal title="设置登录名" v-model="show" :closable="false" :mask-closable="false" @on-visible-change="showModal" :width="500">
            <el-form ref="waybill" label-position="right" label-width="120px" :model="waybill" :rules="rules">
                <el-form-item label="设置登录名" prop="loginName">
                    <el-input  size="small"  v-model="waybill.loginName" placeholder="请输入登录名" style="width: 260px" />
                </el-form-item>
                <el-alert >只能设置一次，设置完不可修改，可用来登陆</el-alert>
           </el-form>
            <div slot="footer">
                <el-button  size="small"  @click="cancel">先跳过</el-button>
                <el-button  size="small"  type="primary" :loading="modalLoading" @click="ok">绑定</el-button>
            </div>
        </Modal>
    </div>
</template>
<script>
export default {
    name: 'Waybill',
    data() {
        return {
            modalLoading: false,
            waybill: {
                loginName: ""
                
            },
            rules: {
                loginName: [{ required: true, message: "登录名不能为空" }]

            }
        }
    },

    mounted: function() {



    },
    computed: {

    },
    props: [
        'show',
    ],
    methods: {
        showModal: function(value) {
            if (value) {

            }else{
                this.loginName="";
            }
        },

        ok: function() {

            this.$refs['waybill'].validate((valid) => {

                if (valid) {
                    this.okSubmit();
                } else {
                    this.errorMessage('请填写好登录名');
                }
            });




        },
        okSubmit: function() {
            var me = this;

            me.$http.post("/merchant/bindLoginName.do", me.waybill).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("设置成功");
                   me.$emit('ok');

                } else {
                    me.errorMessage(body.info);
                }
                me.modalLoading = false;
            }, response => {
                me.modalLoading = false;
            });
        },
        cancel: function() {

            this.$emit('cancel');
        }


    }

}
</script>
<style scoped>
</style>